import { forwardRef, useImperativeHandle, useEffect } from 'react';
import { Form, Input } from 'antd';
import Expression from '../components/Expression';
import { formSpecialCharRegVerification } from '../../utils';

const SequenceFlowBase = forwardRef((props: any, ref) => {
    const { curElement, sequenceFlowData, processData } = props;
    const [form] = Form.useForm();

    useEffect(() => {
        let _curData = sequenceFlowData?.find((item: { activityId: string; }) => item?.activityId == curElement?.id);
        form.setFieldsValue({
            ..._curData,
            remark: curElement?.name ?? curElement?.businessObject?.name ?? _curData?.remark ?? '',
        });
    }, [curElement, sequenceFlowData]);

    useImperativeHandle(ref, () => ({
        form,
    }));

    return (
        <Form
            labelAlign='left'
            labelWrap={true}
            layout={'vertical'}
            form={form}
        >
            <Form.Item
                label='标识'
                name='activityId'
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                className='bpmn-custom-properties-radio-label no-padding'
            >
                <Input readOnly />
            </Form.Item>
            <Form.Item
                label='说明'
                name='remark'
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                className='bpmn-custom-properties-radio-label no-padding'
                rules={[
                    formSpecialCharRegVerification,
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label='表达式'
                name='conditionExpression'
            >
                <Expression processId={processData?.id || ''} />
            </Form.Item>
        </Form>
    );
})

export default SequenceFlowBase